<template>
  <div>
    <el-container class="document-container">
      <el-aside :width="isMobile ? '100%' : '700px'">
        <div class="quality-document">
          <div class="quality-header">
            <h1 class="document-title" v-if="!isMobile">文档</h1>
            <div class="tagList">
              <tagList type="document" :listLimit="limit" :listPage="page" />
            </div>
          </div>
          <div
            class="documentlist"
            v-loading="loading"
            v-if="documentList.length"
          >
            <div
              class="loadmore"
              v-if="!isDone"
              @click="loadMoreDocumentList"
              type="info"
            >
              <i class="el-icon-bottom"></i>
              加载更多
            </div>
            <div class="no-more" v-else>
              没有更多数据了
            </div>

            <div class="document-wrapper" v-for="d in documentList" :key="d.id">
              <!-- <div class="document">
                <el-tooltip effect="dark" placement="left" content="下载">
                  <el-link
                    @click="downloadDocument(d)"
                    :underline="false"
                    class="cover-container"
                  >
                    <img class="cover" :src="defaultImg" />
                    <img
                      v-if="d.type == 'docx' || d.type == 'doc'"
                      class="type-icon"
                      src="@/assets/img/svg/word.svg"
                      alt=""
                    />
                    <img
                      v-else-if="d.type == 'pdf'"
                      class="type-icon"
                      src="@/assets/img/svg/pdf.svg"
                      alt=""
                    />
                    <img
                      v-else-if="d.type == 'ppt' || d.type == 'pptx'"
                      class="type-icon"
                      src="@/assets/img/svg/ppt.svg"
                      alt=""
                    />
                    <img
                      v-else-if="d.type == 'xlsx'"
                      class="type-icon"
                      src="@/assets/img/svg/excel.svg"
                      alt=""
                    />
                    <img
                      v-else-if="d.type == 'txt'"
                      class="type-icon"
                      src="@/assets/img/svg/txt.svg"
                      alt=""
                    />
                  </el-link>
                </el-tooltip>

                <el-link class="doctitle" type="info" :underline="false">{{
                  d.document_title
                }}</el-link>
                <div class="property">
                  <el-link
                    :underline="false"
                    @click="documentThumb(d)"
                    type="info"
                  >
                    <i class="fa fa-heart"></i>
                    {{ d.like_count }}</el-link
                  >

                  <el-link
                    @click="downloadDocument(d)"
                    :underline="false"
                    type="info"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      width="1em"
                      height="1em"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M17.8395 8.05827C17.1837 5.16226 14.5944 3 11.5 3C7.91015 3 5 5.91015 5 9.5C5 10.0204 5.06115 10.5264 5.17665 11.0114C2.84229 11.1772 1 13.1234 1 15.5C1 17.9853 3.01469 20 5.49995 20H17C20.3137 20 23 17.3137 23 14C23 10.9712 20.7558 8.46659 17.8395 8.05827ZM11.6799 17.7333C11.8653 17.8878 12.1347 17.8878 12.3201 17.7333L17.4695 13.4421C17.6492 13.2924 17.5433 13 17.3095 13H14V9.5C14 9.22386 13.7761 9 13.5 9H10.5C10.2239 9 10 9.22386 10 9.5V13H6.69051C6.45669 13 6.35084 13.2924 6.53047 13.4421L11.6799 17.7333Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                    {{ d.download_count ? d.download_count : 0 }}
                  </el-link>
                  <el-link
                    v-if="!isMobile"
                    @click="openCommentDialog(d)"
                    :underline="false"
                    type="info"
                  >
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      width="1em"
                      height="1em"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                    {{ d.comment_count }}</el-link
                  >
                  <el-link v-else :underline="false" type="info">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      width="1em"
                      height="1em"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M23 11.5C23 5.70101 18.299 1 12.5 1C6.70101 1 2 5.70101 2 11.5C2 13.4179 2.51422 15.2157 3.4123 16.7631L2.08689 20.7393C1.83512 21.4946 2.52398 22.2269 3.29323 22.0218L7.70712 20.8448C9.14399 21.5832 10.7733 22 12.5 22C18.299 22 23 17.299 23 11.5ZM7.5 13C6.67157 13 6 12.3284 6 11.5C6 10.6716 6.67157 10 7.5 10C8.32843 10 9 10.6716 9 11.5C9 12.3284 8.32843 13 7.5 13ZM14 11.5C14 12.3284 13.3284 13 12.5 13C11.6716 13 11 12.3284 11 11.5C11 10.6716 11.6716 10 12.5 10C13.3284 10 14 10.6716 14 11.5ZM17.5 13C16.6716 13 16 12.3284 16 11.5C16 10.6716 16.6716 10 17.5 10C18.3284 10 19 10.6716 19 11.5C19 12.3284 18.3284 13 17.5 13Z"
                        fill="currentColor"
                      ></path>
                    </svg>
                    {{ d.comment_count }}</el-link
                  >
                </div>
                <div class="date">{{ d.create_time | formatDate }}</div>
              </div> -->
              <DocumentCard :document="d" @getDocumentList="getDocumentList" />
            </div>
          </div>
          <div v-else>
            <el-empty description="暂无文档"></el-empty>
          </div>
        </div>
      </el-aside>
      <el-main style="padding:0" v-if="!isMobile" class="slide-container">
        <AnnouncementCard />
        <!-- <DocumentRankList /> -->
      </el-main>
      <CommentListDialog
        v-if="currentDocumentId"
        :ShowDialogVisible="ShowDialogVisible"
        :currentDocumentId="currentDocumentId"
        @dialogClosed="handleDialogClosed"
      />
    </el-container>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
export default {
  props: {},
  components: {
    tagList: defineAsyncComponent(() =>
      import('@/components/Document/tagList')
    ),
    CommentListDialog: defineAsyncComponent(() =>
      import('@/components/Document/CommentListDialog')
    ),
    AnnouncementCard: defineAsyncComponent(() =>
      import('@/components/Tools/AnnouncementCard')
    ),
    DocumentRankList: defineAsyncComponent(() =>
      import('@/components/Document/DocumentRankList')
    ),
    DocumentCard: defineAsyncComponent(() =>
      import('@/components/Document/DocumentCard')
    )
  },
  data() {
    return {
      limit: 6,
      page: 1,
      count: 0,
      documentList: [],
      tagList: [],
      currentDocumentId: null,
      ShowDialogVisible: false,
      // 加载
      loading: false,
      isDone: false,
      isSwitchTag: false
    }
  },
  computed: {
    isMobile() {
      return this.$data.isMobile
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      // 获取文档列表
      this.getDocumentList()
      this.eventLisen()
    })
  },
  beforeDestroy() {
    // 销毁事件
    this.$bus.$off('SwitchDocumentList', this.SwitchDocumentList)
  },
  methods: {
    // 全局事件监听
    eventLisen() {
      // 监听选中tag事件
      this.$bus.$on('SwitchDocumentList', this.SwitchDocumentList)
    },
    // 获取文档列表
    async getDocumentList() {
      this.loading = true
      this.page = 1
      const { limit, page } = this
      let res
      if (this.isSwitchTag) {
        res = await this.$API.document.getDocumentsByTagId(
          this.tagId,
          limit,
          page
        )
      } else {
        res = await this.$API.document.getDocumentList(limit, page)
      }
      console.log(res)
      if (res.status == 200) {
        this.isDone = false
        this.documentList = res.data.payload.map(doc => {
          if (doc.document_url) {
            // 获取文档格式后缀
            const fileExtension = doc.document_url.substring(
              doc.document_url.lastIndexOf('.') + 1
            )
            return {
              ...doc,
              type: fileExtension
            }
          } else {
            return doc
          }
        })
        this.count = res.data.count
      }
      this.loading = false
    },
    // 根据tag改变文档列表事件
    async SwitchDocumentList(id) {
      this.page = 1
      this.tagId = id
      const { limit, page } = this
      let res
      console.log(id)
      // 全部标签或指定标签
      if (id == 'all') {
        this.isSwitchTag = false
        this.getDocumentList()
      } else {
        this.isSwitchTag = true
        this.tagId = id
        res = await this.$API.document.getDocumentsByTagId(id, limit, page)
      }
      console.log(res)
      if (!res.data) this.documentList = []
      if (res.status == 200) {
        this.documentList = res.data.payload.map(doc => {
          if (doc.document_url) {
            // 获取文档格式后缀
            const fileExtension = doc.document_url.substring(
              doc.document_url.lastIndexOf('.') + 1
            )
            return {
              ...doc,
              type: fileExtension
            }
          } else {
            return doc
          }
        })
        this.isDone = false
      }
    },
    // hoverCover (event) {
    //   // 鼠标滑过时添加上浮效果
    //   event.target.style.transform = "translateY(-10px)";
    //   event.target.style.transition = "transform 0.3s ease";
    // },
    // leaveCover (event) {
    //   // 鼠标离开时移除上浮效果
    //   event.target.style.transform = "translateY(0)";
    // },
    // 获取推荐文档
    getRecommendDocumentList() {},
    // 关闭对话框事件
    handleDialogClosed() {
      this.ShowDialogVisible = false
    },
    async loadMoreDocumentList() {
      this.loading = true
      this.page++

      const { limit, page } = this
      let res
      if (this.isSwitchTag) {
        res = await this.$API.document.getDocumentsByTagId(
          this.tagId,
          limit,
          page
        )
      } else {
        res = await this.$API.document.getDocumentList(limit, page)
      }

      if (!res.data) this.isDone = true
      if (res.status === 200) {
        const newData = res.data.payload.map(doc => {
          if (doc.document_url) {
            const fileExtension = doc.document_url.substring(
              doc.document_url.lastIndexOf('.') + 1
            )
            return {
              ...doc,
              type: fileExtension
            }
          } else {
            return doc
          }
        })
        // 如果存在更多数据就将数据添加到列表里并添加数据
        if (newData.length > 0) {
          this.documentList = [...this.documentList, ...newData]
        } else {
          this.isDone = true
        }
      }
      this.loading = false
    },
    // 文档点赞
    async documentThumb(d) {
      // 整理数据
      const datas = this.$qs.stringify({
        document_id: d.id
      })
      const res = await this.$API.document.documentThumb(datas)
      console.log(res)
      if (res.status == 200) {
        this.getDocumentList()
      }
    }
  }
}
</script>

<style scoped>
/* 模块分类 */
@import '@/assets/style/modules/document.css';
</style>
